{extend name="base"}
{block name="main"}
<style type="text/css">
*{
	moz-user-select: -moz-none;
	-moz-user-select: none;
	-o-user-select:none;
	-khtml-user-select:none;
	-webkit-user-select:none;
	-ms-user-select:none;
	user-select:none;
}
.hr{
	border-top:solid 1px #F56C6C;
}
</style>
<div id="app" v-cloak>
	<el-row class="ws-quote">
		<el-col span="24">
			当前在线设备
		</el-col>
	</el-row>
	<el-row>
		<el-col :span="12" class="p_b20">
			<el-table :data="tableData" border stripe>
				<el-table-column prop="id" label="编号" sortable></el-table-column>
				<el-table-column prop="name" label="名称"></el-table-column>
				<el-table-column prop="login_name" label="登录名"></el-table-column>
				<el-table-column prop="version" label="版本号" sortable></el-table-column>
				<!-- <el-table-column prop="tel" label="联系号码"></el-table-column> -->
				<!-- <el-table-column prop="udid" label="UDID"></el-table-column> -->
				<el-table-column prop="remark" label="备注"></el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button type="danger" size="mini" @click="connet(scope.row.id,false)"  v-if="scope.row.id==device_id">关闭</el-button>
						<el-button type="primary" size="mini" @click="connet(scope.row.id)" v-else>连接</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-col>
		<el-col :span="10" :offset="1" style="min-width: 700px;">
			<el-row>
				<el-col :span="12">
					<canvas 
						id="ws-screen" 
						:width="pixel_w" 
						:height="pixel_h" 
						:style="styles" 
						@click="click" 
						@dblclick="dblclick" 
						@mousedown="mousedown" 
						@mouseleave="mouseleave" 
						@mouseup="mouseup" 
					>

					</canvas>

					<!-- <img 
						:src="image"
						id="ws-screen" 
						:width="pixel_w" 
						:height="pixel_h" 
						:style="styles" 
						@click="click" 
						@dblclick="dblclick" 
						@mousedown="mousedown" 
						@mouseleave="mouseleave" 
						@mouseup="mouseup" 
					>

					</img> -->
				</el-col>
				<el-col :span="11" :offset="1">
					<el-form :model="options" inline size="mini">
						<el-form-item label="背景色">
						  <el-input v-model="options.bg">
						</el-form-item>
						<el-form-item label="宽(px)">
						  <el-input v-model="options.w">
						</el-form-item>
						<el-form-item label="高(px)">
						  <el-input v-model="options.h">
						</el-form-item>
						<el-form-item label="像素(w)">
						  <el-input v-model="pixel_w">
						</el-form-item>
						<el-form-item label="像素(h)">
						  <el-input v-model="pixel_h">
						</el-form-item>
					  	<el-form-item label="手机宽度">
					    	<el-input v-model="options.width">
						</el-form-item>
						<el-form-item label="手机高度">
					   		<el-input v-model="options.height">
					  	</el-form-item>
					  	<el-form-item label="点击坐标">
					    	<span class="block" style="width: 120px;">{{pc_pos}}</span>
					  	</el-form-item>
					  	<br>
					  	<el-form-item label="实际坐标">
					    	<span class="block" style="width: 120px;">{{pos}}</span>
					  	</el-form-item>
					</el-form>
				</el-col>
				<!-- <el-col :span="11" :offset="1" class="p_y20">
					<el-button type="info" size="small" @click="onGet('{:url('reloadSocket')}',true,null,false)">重启Socket服务器</el-button>
				</el-col> -->	
				<el-col :span="11" :offset="1" class="p_y20">
					<el-button type="info" size="small" @click="onToolbar(100,true)">全部关机</el-button>
					<el-button type="danger" size="small" @click="onToolbar(26,true)">全部息屏</el-button>
					<el-button type="primary" size="small" @click="onGet('install')">一键安装更新包</el-button>
				</el-col>
				<el-col :span="11" :offset="1" class="p_y20">
					<p class="hr"></p>
					<el-form v-if="false">
						<el-form-item label="信息内容">
					    	<el-input v-model="text" placeholder="输入需要发送内容">
						</el-form-item>
						<el-form-item>
					    	<el-button type="primary" size="small" @click="onToolbar(101)">发送</el-button>
						</el-form-item>
					</el-form>
				</el-col>
			</el-row>
			<el-row v-show="device_id">
				<el-tooltip content="关机" >
			  		<el-button type="info" @click="onToolbar(100)" icon="el-icon-more" circle></el-button>
			  	</el-tooltip>
			  	<el-tooltip content="息屏" >
			  		<el-button type="danger" @click="onToolbar(26)" icon="el-icon-view" circle></el-button>
			  	</el-tooltip>
			  	<el-tooltip content="返回" >
			  		<el-button type="primary" @click="onToolbar(4)" icon="el-icon-arrow-left" circle></el-button>
			  	</el-tooltip>
			  	<el-tooltip content="Home" >
			  		<el-button type="success" @click="onToolbar(3)" icon="el-icon-mobile-phone" circle></el-button>
			  	</el-tooltip>
			  	<el-tooltip content="删除" >
			  		<el-button type="danger" @click="onToolbar(67)" icon="el-icon-caret-left" circle></el-button>
			  	</el-tooltip>
			</el-row>
		</el-col>
	</el-row>
	
</div>
{/block}

<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>

{block name="vue"}

<script type="text/babel" type="text/javascript">
if(window.socket){
	socket.close();
}
window.socket = io("{:config('setting.socket_host2')}");
window.imgObj=new Image();
var app=new Vue({
	el:'#app',
	mixins:[wsMixins],
	data:{
		tableData:[],
		pixel_w:360,
		pixel_h:640,
		options:{
			w:360, //视图宽度
			h:640,
			bg:'#dddddd',
			width:720, //手机宽度
			height:1280,
		},
		pc_pos:[0,0], 
		pos:[0,0], //实际坐标
		isMove:false,
		device_id:0, //当前正在传输画面的设备ID
		text:'', //发往移动端的信息
		image:'',
	},
	created(){
		this.init();
		
	},
	mounted(){
		this.drawImages();

	},
	computed:{
		styles(){
			let options=this.options;
			return {
				width:options.w.toString()+'px',
				height:options.h.toString()+'px',
				'background-color':options.bg
			}
		}
	},
	watch:{
		pixel_w(){
			this.drawImages();
		},
		pixel_h(){
			this.drawImages();
		},
	},
	methods:{
		_getUsers(){
			socket.emit('_getUsers',{});
		},
		init(){
			if(socket){
				socket.on('connect',_=>{
					// 连接成功
					socket.emit('login',{id:"{$user.id}",login_name:"{$user.login_name}",type:1});
					// 获取在线设备
					socket.on('getUsers',data=>{
					    if(data){
					    	this.getDevices(data);
					    }
					})
					socket.emit('getUsers',{});
					// 在线对象
					socket.on('_getUsers',data=>{
					    console.log('_getUsers',data)
					})

					//当前正在传输画面的设备ID
					socket.on('screening',data=>{
					    if(data){
					    	console.log('screening',data)
					    	this.device_id=data.device_id;
					    	if(data.device_id==0){
					    		this.drawImages();
					    	}
					    }
					})
					
				});
				// 用户离开页面停止画面传输
				window.onbeforeunload=function(e){     
					if(this.device_id){
						socket.emit('closeScreen',{device_id});
				    	this.device_id=0;
				    	this.drawImages();
					}
				} 
			}
			
		},
		getDevices(data){
			if(!data)return;
			$.post("{:url('getDevices')}",{ids:data},res=>{
				if(res&&res.data){
					let data=res.data;
					if(typeof data==='string'){
						data=JSON.parse(data);
					}
					this.tableData=data;
				}else{
					this.tableData=[];
				}
			},'json');
		},
		// 开启关闭画面连接
		connet(device_id,type=true){
			if(socket){
				console.log('connet',device_id)
		    	socket.emit('closeScreen',{device_id});
		    	this.device_id=0;
		    	this.drawImages();
		    	if(type){
		    		socket.emit('getScreen',{device_id});
		    	}
		    }

		},
		drawImages(images){
			images=images||"{:_static()}/images/screen.png";
			imgObj.src = images;
			//this.image = images;
		},
		onEvents(event,_pos,mouseup=false){
		    let h=this.options.height,w=this.options.width;
		    if(!mouseup&&(_pos.x<=0||_pos.y<=0||_pos.x>=w||_pos.y>=h)){
		    	if(_pos.x<0){
		    		_pos.x=0;
		    	}
		    	if(_pos.y<0){
		    		_pos.y=0;
		    	}
		    	if(_pos.x>w){
		    		_pos.x=w;
		    	}
		    	if(_pos.y>h){
		    		_pos.y=h;
		    	}
		    	this.mouseup({},_pos);
		    	return ;
		    }
		    let pos={
		        x:_pos.x*w/360,
		        y:_pos.y*h/640
		    }
		    this.pc_pos=[_pos.x,_pos.y];
		    this.pos=[pos.x,pos.y];
		    if(socket){
		    	console.log(pos)
		    	socket.emit('events',{device_id:this.device_id,event,pos});
		    }
		},

		// 鼠标模拟事件
		
		// 菜单栏功能
		onToolbar(num,isAll=false){
			if(num==100){
				this.$confirm('确定关机？').then(rs=>{
					if(socket){
						socket.emit('events',{device_id:this.device_id,isAll,event:'keyevent',pos:{num,text:''}});
					}
				}).catch(err=>err);
			}else if(num==101){ // 该功能由于移动端某些原因暂无法实现
				if(!this.text.length){
					this.$message({
						type:'warning',
						message:'信息内容不能为空'
					});
					return;
				}
				socket.emit('events',{device_id:this.device_id,event:'keyevent',pos:{num,text:this.text}});
			}else{
				socket.emit('events',{device_id:this.device_id,isAll,event:'keyevent',pos:{num,text:''}});
			}
		},
		// 单击
		click(e){
			let _pos={
			    x:e.offsetX,
			    y:e.offsetY
			}
			this.onEvents('click',_pos)
		},
		// 双击
		dblclick(e){
			let _pos={
			    x:e.offsetX,
			    y:e.offsetY
			}
			this.onEvents('dblclick',_pos)
		},
		// 按下
		mousedown(e){
			let _pos={
		        x:e.offsetX,
		        y:e.offsetY
		    }
		    // 移动
		    $('#ws-screen').on('mousemove',e=>{
		        let _pos={
		            x:e.offsetX,
		            y:e.offsetY
		        }
		        this.isMove=true;
		        this.onEvents('mousemove',_pos)
		    });
		    this.onEvents('mousedown',_pos)
		},
		//离开
		mouseleave(e){
			if(this.isMove){
				this._removeMouseMove();
			    let _pos={
			        x:e.offsetX,
			        y:e.offsetY
			    }
			    this.onEvents('mouseup',_pos)
			}
		},
		// 抬起
		mouseup(e,_pos){
			this._removeMouseMove();
		    _pos=_pos||{
		        x:e.offsetX,
		        y:e.offsetY
		    };
		    this.onEvents('mouseup',_pos,true)
		},
		// 关闭移动实际
		_removeMouseMove(){
			this.isMove=false;
		    $('#ws-screen').off('mousemove')
		},
		isScreen(id){
			return this.device_id==id;
		}
	}
});
</script>
<script type="text/babel" type="text/javascript">

// 载入图片

socket.on('screen',function(dataurl){
	//console.log('screen',dataurl)
    imgObj.src = dataurl;
    //app.image = dataurl;
})
let urlCreator = window.URL || window.webkitURL;
socket.on('file',function(dataurl){
	console.log('file',dataurl)
	let buffArr=new Uint8Array(dataurl);
    let blob = new Blob([buffArr], { type: "image/jpeg" });
    let imageUrl = urlCreator.createObjectURL(blob);
    imgObj.src = imageUrl;
    //app.image = dataurl;
})
//待图片加载完后，将其显示在canvas上
let ctx = document.getElementById("ws-screen").getContext('2d');
imgObj.onload = function(){
   ctx.drawImage(this, 0, 0,360,640);
}
</script>
{/block}